<template>
  <div class="main">
    <div class="Turntable">
      <div class="box">
        <ul class="gameBox">
          <li class="legendItem" v-for="(v, i) in prizesLegend" :key="i">
            <img :src="v.picUrl" alt="" :class="[{ grey: v.id == index }]" />
          </li>
          <div class="btn" @click="startLottery"></div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { prizesLegend } from "./utils";
export default {
  name: "focusDraw",
  data() {
    return {
      prizesLegend, //奖品图例列表
      index: -1, // 当前转动到哪个位置，起点位置
      count: 8, // 总共有多少个位置
      timer: 0, // 每次转动定时器
      speed: 200, // 初始转动速度
      times: 0, // 转动次数
      cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: -1, // 中奖位置
      click: true, //控制点击抽奖
    };
  },
  methods: {
    // 开始抽奖
    startLottery() {
      if (!this.click) {
        return false;
      }
      this.prize = -1; //设置为1让转盘一直处于转动状态
      this.speed = 200;
      this.click = false;
      this.startRoll(); //转动
      //设置抽中奖品-可接口获取
      setTimeout(() => {
        this.prize = 7;
      }, 3000);
    },
    // 开始转动
    startRoll() {
      this.times += 1; // 转动次数
      this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
      if (this.times > this.cycle + 10 && this.prize === this.index) {
        clearTimeout(this.timer); // 清除转动定时器，停止转动
        this.times = 0;
        this.click = true;
        console.log("抽中奖品");
      } else {
        if (this.times < this.cycle) {
          this.speed -= 10; // 加快转动速度
        } else if (this.times === this.cycle) {
          if (this.prize > 7) {
            this.prize = 7;
          }
        } else if (
          this.times > this.cycle + 10 &&
          ((this.prize === 0 && this.index === 7) ||
            this.prize === this.index + 1)
        ) {
          this.speed += 110;
        } else {
          this.speed += 20;
        }
        if (this.speed < 40) {
          this.speed = 40;
        }
        this.timer = setTimeout(this.startRoll, this.speed);
      }
    },
    // 每一次转动
    oneRoll() {
      let index = this.index; // 当前转动到哪个位置
      const count = this.count; // 总共有多少个位置
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      this.index = index;
    },
  },
  destroyed() {
    window.clearInterval(this.timer);
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  .Turntable {
    width: 100%;
    display: flex;
    justify-content: center;
    .box {
      width: 352px;
      height: 337px;
      background: url("../../assets/focusDraw/cjBg.png") no-repeat top center;
      background-size: 352px 337px;
      position: relative;
      .times {
        width: 100%;
        text-align: center;
        height: 13px;
        font-size: 13px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: rgba(187, 38, 8, 1);
        position: absolute;
        left: 0;
        top: 8px;
      }
      .gameBox {
        position: absolute;
        width: 284px;
        height: 244px;
        top: 57px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
        position: relative;
        .btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: url("../../assets/focusDraw/cjBtn.png") no-repeat top
            center;
          background-size: 79px 79px;
          width: 79px;
          height: 79px;
        }
        .legendItem {
          width: 92.5px;
          height: 78.5px;
          img {
            width: 92.5px;
            height: 78.5px;
          }
        }
      }
    }
  }
}
.grey {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style>
